<template>
  <view class="order-status page_bg_FAFAFA">
    <view class="zIndex-bg">
      <view class="order-status-text">
        {{ getOrderStatusText(orderInfo.status) }}
      </view>
    </view>
    <view class="address padd32">
      、<com-address :address-info="orderInfo.receiveAddressDto"></com-address>
    </view>
    <view class="goods-info padd32">
      <com-goodsInfo :goods-info="orderInfo" :price="orderInfo.price"></com-goodsInfo>
    </view>
    <view class="cells">
      <u-cell-group>
      		<u-cell  title="订单编号" :value="orderInfo.orderSn"></u-cell>
      		<u-cell  title="创建时间" :value="orderInfo.createTime"></u-cell>
          <u-cell  title="付款方式" :value="orderInfo.payType == 1 ? '学分支付' : '其他支付'"></u-cell>
          <u-cell  title="付款时间" :value="orderInfo.paymentTime"></u-cell>
      	</u-cell-group>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
       orderId: '',
       orderInfo: {}
      };
    },
    onLoad(query) {
      console.log(query);
      this.orderId = query.orderId
      this.getOrderInfo()
    },
    methods: {
     async getOrderInfo() {
        const res = await this.$http.get(`/yaolexue-service-portal/order/orderInfoById/${this.orderId}`)
        console.log('getOrderInfo', res);
        this.orderInfo = res.data
      },
      getOrderStatusText(status) {
        switch (status) {
          case 2:
            return '待发货';
          case 3:
            return '待确认';
          case 4:
            return '确认收货';
          case 5:
            return '已完成';
          default:
            return '';
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
.order-status {
  .zIndex-bg {
    width: 100%;
    height: 210rpx;
    background: #FA312A;
    border-radius: 0px 0px 700px 700px / 0px 0px 90px 90px;
    
    .order-status-text {
      position: absolute;
      left: 40rpx;
      top: 40rpx;
      color: #FFFFFF;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
    }
  }
  .address {
    position: absolute;
    left: 0;
    top: 80rpx;
    overflow: hidden;
  }
  .goods-info {
    overflow: hidden;
    display: block;
    margin-top: 60px;
    
    ::v-deep .goods-container {
      padding-left: 19rpx !important;
    }
  }
  .cells {
    // margin-top: 15rpx;
    width: 689rpx;
    height: 362rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    margin: 15rpx 31rpx 0 31rpx;
    
    .u-cell {
      ::v-deep .u-cell__body {
        height: 86rpx;
      }
      
    }
  }
}
</style>
